<!DOCTYPE html>
<html class="ui-page-login">

<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <title>修改密码</title>
    <link href="../../css/mui.css" rel="stylesheet"/>
    <link href="../../css/reset.css" rel="stylesheet"/>
    <link rel="stylesheet" href="../../css/iconfont.css" />
    <link rel="stylesheet" href="../../css/dashi.css" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="apple-touch-fullscreen" content="yes">
    <meta name="full-screen" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="white">
    <meta name="format-detection" content="telephone=no"/>
    <meta name="format-detection" content="address=no">
    <script src="../../js/jquery.min.js"></script>
    <script type="text/javascript">
        var docEl = document.documentElement;
        var clientWidth = docEl.clientWidth;
        docEl.style.fontSize = (clientWidth / 10) + 'px';
        $(document).ready(function () {
            (function (doc, win) {
                var docEl = doc.documentElement,
                        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
                        recalc = function () {
                            var clientWidth = docEl.clientWidth;
                            docEl.style.fontSize = (clientWidth / 10) + 'px';
                        };

                if (!doc.addEventListener) return;
                win.addEventListener(resizeEvt, recalc, false);
                doc.addEventListener('DOMContentLoaded', recalc, false);
            })(document, window);
        });
    </script>
</head>

<body>
<article class="mui-content changepw">
    <form id='sign-form' style="padding-top: 20px">
        <div class="mui-input-group no-border">
            <div class="mui-input-row mobile-box">         
            	<span class="tianchong-word">原密码</span>
                <input name="oldPwd" type="text" class="mui-input-clear mui-input" placeholder="" required>
            </div>
            <div class="mui-input-row mobile-box">
            	<span class="tianchong-word">新密码</span>
                <input name="newPwd" id="password" type="password" class="mui-input-clear mui-input" placeholder="6-20位的数字、字母组合" required>
            </div>
            <div class="mui-input-row mobile-box">
            	<span class="tianchong-word">确认密码</span>
                <input name="sureNewPwd" type="password" class="mui-input-clear mui-input" placeholder="">
            </div>
        </div>
        <section class="mui-content-padded mui-row" style="margin-top: 20px;padding:0 15px;">
            <button type="button" id='btn-editpwd' class="mui-btn mui-btn-block mui-btn-fruit" disabled>确认修改</button>
        </section>
    </form>

</article>
<script src="../../js/jquery-2.1.1.min.js"></script>
<script src="../../js/jquery.validate.js"></script>
<script src="../../js/mui.min.js"></script>
<script src="../../js/main.js"></script>
<script src="../../js/user.js"></script>
<script>
    $(function(){
        if( getUserInfo() ){
            var user = getUserInfo();
            function validate(){
                var validate = $('#sign-form').validate({
                    debug: true, //调试模式取消submit的默认提交功能
                    focusInvalid: false, //当为false时，验证无效时，没有焦点响应
                    rules:{
                        oldPwd:{
                            required:true
                        },
                        newPwd:{
                            required:true
                        },
                        sureNewPwd:{
                            required:true,
                            equalTo:"#password"
                        }
                    }
                });
                var ck = validate.checkForm();
                if( ck ){
                    $('#btn-editpwd').removeAttr('disabled');
                }else {
                    $('#btn-editpwd').attr('disabled', true);
                }
            }
            //删除按钮tap事件，验证form表单
            $('#sign-form').on('tap','.mui-icon-clear',function(){
                validate();
            });
            //输入框keyup事件，验证form表单
            $('#sign-form .mui-input-row .mui-input').on('keyup', function(){
                validate();
            });
            $('#btn-editpwd').on('tap', function(){
                var oldPwd = $.trim($('#sign-form input[name="oldPwd"]').val()),
                        newPwd = $.trim($('#sign-form input[name="newPwd"]').val()),
                        sureNewPwd = $.trim($('#sign-form input[name="sureNewPwd"]').val());
                if( oldPwd == newPwd ){
                    mui.toast('新密码不能和原密码相同', 1000);
                    return false;
                }
                if( newPwd != sureNewPwd ){
                    mui.toast('两次输入密码不一致', 1000);
                    return false;
                }
                var data = {
                    apiCode: '_set_pwd_001',
                    userToken: user.userToken,
                    oldPwd: oldPwd,
                    newPwd: newPwd,
                    sureNewPwd: sureNewPwd
                };
                http(data, function(responed){
                    if( responed.error == 0 ){
                        mui.toast('密码设置成功', 1000);
                        setTimeout(function(){
                            location.href = 'set.html';
                        }, 1000);
                    }else{
                        mui.alert(responed.info);
                    }
                });
            });
        }
    });
</script>
</body>
</html>